<template>
    <view class="ranking">
        <view class="search_top_back">
            <view class="search_top_nav">
                <view :style="{ height: statusBarHeight }" class="status_bar"></view>
                <view class="search_nav_content">
                    <!-- 				<view @click="back" style="width: 76rpx;height: 88rpx;">
					<image style="margin-left: 28rpx;height: 36rpx;width: 20rpx;margin-top: 26rpx;" src="@/static/img/back.png"></image>
				</view> -->
                    <label class="search_title">排行</label>
                </view>
            </view>
            <!-- #ifndef MP-WEIXIN -->
            <view style="height: 88rpx"></view>
            <!-- #endif -->
            <!-- #ifdef MP-WEIXIN -->
            <view style="height: 88rpx"></view>
            <!-- #endif -->
            <view class="ranking-top">
                <view>!</view>
                每个排行榜前三名最终可获得积分奖励
            </view>
            <view class="ranking-bang">
                <block v-for="(item, index) in rankListThree" :key="index">
                    <!--  -->
                    <view class="rankBang-item item2" :class="index == 0 ? 'item2' : index == 1 ? 'item1' : 'item3'">
                        <view class="rankBang-name">{{ item.userName }}</view>
                        <view class="rankBang-kg">{{ item.weightLoss }}kg</view>
                        <view class="rankBang-autor"
                            ><image :src="item.avatarAbsolute || defaultAvatar" mode="" style="border-radius: 50%"></image
                        ></view>
                    </view>
                </block>
            </view>
        </view>

        <view class="rank-main">
            <view class="rank-type" style="justify-content: flex-start">
                <block v-for="(item, index) in tagType" :key="index">
                    <view :class="type == index ? 'on' : ''" @click="tablist(index)">{{ item }}</view>
                </block>
                <view class="history" @click="gohistory">
                    历史排行
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/right.png" mode=""></image>
                </view>
            </view>
            <view class="rank_content" style="position: relative; height: calc(100vh - 750rpx)">
                <block v-for="(item, index) in rankListshe" :key="index">
                    <view class="rank_item">
                        <view class="rank_title">
                            <text class="rank-num">{{ index + 4 }}</text>
                            <image :src="item.avatarAbsolute || defaultAvatar" mode="" style="border-radius: 50%"></image>
                            <text class="rank_name">{{ item.userName }}</text>
                        </view>
                        <view class="rankRight">{{ item.weightLoss }}kg</view>
                    </view>
                </block>
                <view style="z-index: 1000" v-if="currentUserData.userId > 0" class="rank_item active">
                    <view class="rank_title">
                        <text class="rank-num">{{
                            currentUserData.weightLossRanking === 0 ? "~" : currentUserData.weightLossRanking
                        }}</text>
                        <image :src="currentUserData.avatarAbsolute || defaultAvatar" mode="" style="border-radius: 50%"></image>
                        <text class="rank_name">{{ currentUserData.userName }}</text>
                    </view>
                    <view class="rankRight" v-if="type == 0">
                        <text v-if="currentUserData.weightLossRanking == 1"
                            >+{{ weightsysconfig.dayWeightLossRankingReward }}积分</text
                        >
                        <text v-if="currentUserData.weightLossRanking == 2"
                            >+{{ weightsysconfig.twoDayWeightLossRankingReward }}积分</text
                        >
                        <text v-if="currentUserData.weightLossRanking == 3"
                            >+{{ weightsysconfig.threeDayWeightLossRankingReward }}积分</text
                        >
                        <view class="rankRightKg">{{ currentUserData.weightLoss || 0 }}kg</view>
                    </view>
                    <view class="rankRight" v-if="type == 2">
                        <text v-if="currentUserData.weightLossRanking == 1"
                            >+{{ weightsysconfig.monthWeightLossRankingReward }}积分</text
                        >
                        <text v-if="currentUserData.weightLossRanking == 2"
                            >+{{ weightsysconfig.twoMonthWeightLossRankingReward }}积分</text
                        >
                        <text v-if="currentUserData.weightLossRanking == 3"
                            >+{{ weightsysconfig.threeMonthWeightLossRankingReward }}积分</text
                        >
                        <view class="rankRightKg">{{ currentUserData.weightLoss || 0 }}kg</view>
                    </view>
                    <view class="rankRight" v-if="type == 1">
                        <text v-if="currentUserData.weightLossRanking == 1"
                            >+{{ weightsysconfig.weekWeightLossRankingReward }}积分</text
                        >
                        <text v-if="currentUserData.weightLossRanking == 2"
                            >+{{ weightsysconfig.twoWeekWeightLossRankingReward }}积分</text
                        >
                        <text v-if="currentUserData.weightLossRanking == 3"
                            >+{{ weightsysconfig.threeWeekWeightLossRankingReward }}积分</text
                        >
                        <view class="rankRightKg">{{ currentUserData.weightLoss || 0 }}kg</view>
                    </view>
                </view>
                <view
                    class="empty"
                    v-if="rankList.length == 0"
                    style="position: absolute; top: 20%; left: 0; width: 100%; text-align: center"
                >
                    <image src="https://dove2.oss-cn-beijing.aliyuncs.com/qingyang/artempty.png" mode=""></image>
                    <text>暂无排行内容</text>
                </view>
            </view>
        </view>
        <view style="height: 200rpx"></view>
        <u-loadmore
            v-if="more"
            :status="status"
            loadingText="加载中"
            loadmoreText="上拉加载更多"
            nomoreText="已经到底啦～"
            fontSize="28"
            iconSize="30"
            marginTop="20"
            marginBottom="30"
        ></u-loadmore>
        <rankList-popup :show="show" @close="getMessage" :dataCom="rankShowList"></rankList-popup>
        <!-- <rankingList-popup :show="show1" @close="show1 = false"></rankingList-popup> -->
    </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + "px";
export default {
    data() {
        return {
			defaultAvatar: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
            statusBarHeight: statusBarHeight,
            tagType: ["当天排行", "本周排行", "本月排行"],
            type: 0,
            show: false,
            show1: false,
            rankType: 0,
            startTime: "",
            endTime: "",
            pageNum: 1,
            pageSize: 20,
            isloading: false,
            total: 0,
            rankList: [],
            rankListThree: [],
            rankimgList: [],
            status: "loadmore",
            more: false,
            currentUserData: {},
            rankShowList: [],
            weightsysconfig: {},
            rankListshe: {},
        };
    },
    onTabItemTap(e) {
        this.isAuthNicknamePhone();
    },
    onLoad() {
        this.getRanking(true);
        // this.getMessage()
        this.getMessagelist();
        // this.getRankPopup()
        this.getInte();
    },
    onPullDownRefresh() {
        // this.getMessage()
        this.getMessagelist();
        this.getRanking(true);
    },
    onReachBottom() {
        if (this.more == false) return;
        this.status = "loading";
        this.pageNum = ++this.pageNum;
        this.getRanking(false);
    },
    computed: {
        ...mapState(["isLogin", "userInfo"]),
    },
    methods: {
        ...mapMutations(["loginSaveUserInfo", "logout"]),
        isAuthNicknamePhone() {
            if (this.userInfo.nickname == "" || this.userInfo.nickname == null || this.userInfo.nickname == undefined) {
                this.authUserInfo();
                return false;
            }
            if (this.userInfo.phone == "" || this.userInfo.phone == null || this.userInfo.phone == undefined) {
                uni.navigateTo({
                    url: "/pages/login/login",
                });
                return false;
            }
            return true;
        },
        getInte() {
            this.request.httpTokenRequest("/mp-api/wx/config/sysconfig", null, "POST", true).then((res) => {
                if (res.code == 0) {
                    this.weightsysconfig = res.data;
                }
            });
        },
        requestUser() {
            this.request
                .httpTokenRequest(`/mp-api/wx/user/detail/${this.userInfo.uid}`, null, "POST", true)
                .then((res) => {
                    if (res.code == 0) {
                        this.loginSaveUserInfo(res.data);
                    }
                });
        },
        authUserInfo() {
            uni.getUserProfile({
                desc: "Wexin",
                success: (res) => {
                    let avatar = res.userInfo.avatarUrl;
                    let nickname = res.userInfo.nickName;
                    this.sendUserInfo(avatar, nickname);
                },
            });
        },
        sendUserInfo(avatar, nickname) {
            var postData = {};
            postData.uid = this.userInfo.uid;
            postData.avatar = avatar;
            postData.nickname = nickname;
            this.request.httpTokenJsonRequest("/mp-api/wx/user/update", postData, "POST", false).then((res) => {
                if (res.code == 0) {
                    if (res.data.phone == "" || res.data.phone == null || res.data.phone == undefined) {
                        uni.navigateTo({
                            url: "/pages/login/login",
                        });
                    }
                    this.requestUser();
                }
            });
        },
        getMessage() {
            let ids = [];
            this.rankShowList.forEach((item) => {
                ids.push(item.id);
            });
            this.request
                .httpTokenRequest(
                    "/mp-api/wx/message/confirmBatch",
                    {
                        ids,
                    },
                    "POST",
                    true,
                )
                .then((res) => {
                    this.show = false;
                });
        },
        getMessagelist() {
            this.request.httpTokenRequest("/mp-api/wx/message/list/my/1", null, "POST", true).then((res) => {
                this.rankShowList = res.data;
                if (this.rankShowList && this.rankShowList.length >= 1) {
                    this.show = true;
                }
            });
        },
        getRanking(isFresh) {
            let that = this;
            if (isFresh) {
                that.pageNum = 1;
                that.pageSize = 20;
            }
            let DataTime = "";
            if (that.type == 0) {
                DataTime = that.helper.formatDate(new Date());
            }
            let data = {
                startRecordDate: that.type == 0 ? DataTime : that.startTime,
                endRecordDate: that.type == 0 ? DataTime : that.endTime,
                rankType: that.rankType,
                pageNum: that.pageNum,
                pageSize: that.pageSize,
                orderByColumn: "weightLossRanking",
                // isAsc:'descending'
            };
            that.request.httpTokenRequest("/mp-api/wx/weight/rankList", data, "POST", true).then((res) => {
                uni.stopPullDownRefresh();
                if (res.code == 0) {
                    if (res.data.params) {
                        that.currentUserData = res.data.params;
                    }
                    if (res.data.list && isFresh) {
                        that.rankList = res.data.list;
                    } else {
                        res.data.list.forEach((item) => {
                            that.rankList.push(item);
                        });
                    }
                    if (res.data.total > that.rankList.length) {
                        that.status = "loadmore";
                        that.more = true;
                    } else {
                        that.more = false;
                        that.status = "nomore";
                    }
                    that.rankListThree = that.rankList.slice(0, 3);
                    that.rankListshe = that.rankList.slice(3);
                } else {
                    that.more = false;
                    that.status = "nomore";
                }
            });
        },

        back() {
            uni.navigateBack();
        },
        tablist(e) {
            this.rankList = [];
            this.type = e;
            this.rankType = e;
            if (this.type == 0) {
                this.getRanking(true);
            } else if (this.type == 1) {
                this.timeSlotChange("本周排行");
                this.getRanking(true);
            } else if (this.type == 2) {
                this.timeSlotChange("本月排行");
                this.getRanking(true);
            }
        },
        open() {},
        open1() {},
        close() {
            this.show = false;
        },
        close1() {
            this.show1 = false;
        },
        gohistory() {
            this.helper.navigateTo("/pages/ranking/historyRanking");
        },
        timeSlotChange(val) {
            let startTime, endTime;
            let now = new Date(); //当前日期
            var nowDayOfWeek = now.getDay(); //今天本周的第几天
            if (nowDayOfWeek == 0) {
                nowDayOfWeek = 7;
            }
            var nowDay = now.getDate(); //当前日
            let nowMonth = now.getMonth(); //当前月
            let nowYear = now.getFullYear(); //当前年
            let jd = Math.ceil((nowMonth + 1) / 3);
            if (val == "本周排行") {
                startTime = new Date(nowYear, nowMonth, nowDay - (nowDayOfWeek - 1));
                endTime = new Date(nowYear, nowMonth, 7 - nowDayOfWeek + nowDay);
                this.startTime = this.helper.formatDate(startTime);
                this.endTime = this.helper.formatDate(endTime);
            } else if (val == "本月排行") {
                startTime = new Date(nowYear, nowMonth, 1);
                endTime = new Date(nowYear, nowMonth + 1, 0);
                this.startTime = this.helper.formatDate(startTime);
                this.endTime = this.helper.formatDate(endTime);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
body {
    height: 100%;
    min-height: 100%;
}

uni-page-body,
html {
    height: 100%;
}

.ranking {
    height: 100%;
    background-color: #e0ede9;
}

.search_top_back {
    width: 100%;
    background: url(https://dove2.oss-cn-beijing.aliyuncs.com/qingyang/rank-bg.png) #e0ede9;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 100%;
}

.status_bar {
    height: 20px;
    width: 100%;
}

.search_nav_content {
    position: fixed;
    width: 100%;
    z-index: 998;
    height: 88rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.search_title {
    width: 180rpx;
    left: calc(50% - 90rpx);
    position: absolute;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    color: #000000;
    font-size: 32rpx;
    font-weight: 500;
}
</style>
